<template>
  <div class="student-home">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎回来，{{ studentName }}！</span>
        </div>
      </template>
      
      <div class="student-info">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="学号">{{ studentId }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ studentName }}</el-descriptions-item>
          <el-descriptions-item label="学院">{{ college }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ department }}</el-descriptions-item>
          <el-descriptions-item label="年级">{{ gradeYearText }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ status }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="action-buttons">
        <el-button type="primary" @click="goToApply">申请奖学金</el-button>
        <el-button @click="goToQuery">查询申请状态</el-button>
        <el-button @click="testStudentInfo">测试学生信息</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { 
  getStudentInfo, 
  getStudentId, 
  getStudentName, 
  getGradeYear, 
  getCollege, 
  getDepartment, 
  getStatus,
  isLoggedIn,
  isStudent 
} from '@/utils/studentInfo.js'

export default {
  name: 'StudentHome',
  data() {
    return {
      studentId: '',
      studentName: '',
      college: '',
      department: '',
      gradeYear: null,
      status: ''
    }
  },
  computed: {
    gradeYearText() {
      const gradeMap = {
        1: '研一',
        2: '研二',
        3: '研三'
      }
      return gradeMap[this.gradeYear] || '未知'
    }
  },
  mounted() {
    this.loadStudentInfo()
  },
  methods: {
    loadStudentInfo() {
     
      if (!isLoggedIn()) {
        ElMessage.error('请先登录')
        this.$router.push('/login')
        return
      }

      if (!isStudent()) {
        ElMessage.error('您不是学生用户')
        this.$router.push('/login')
        return
      }

      
      this.studentId = getStudentId()
      this.studentName = getStudentName()
      this.college = getCollege()
      this.department = getDepartment()
      this.gradeYear = getGradeYear()
      this.status = getStatus()

     
      if (!this.studentName || !this.college) {
        const studentInfo = getStudentInfo()
        if (studentInfo) {
          this.studentName = studentInfo.name || '未知'
          this.college = studentInfo.college || '未知'
          this.department = studentInfo.department || '未知'
          this.gradeYear = studentInfo.gradeYear
          this.status = studentInfo.status || '未知'
        }
      }
    },

    goToApply() {
      this.$router.push('/student/apply')
    },

    goToQuery() {
      this.$router.push('/query')
    },

    testStudentInfo() {
      const studentInfo = getStudentInfo()
      console.log('完整的学生信息对象:', studentInfo)
      console.log('学生ID:', getStudentId())
      console.log('学生姓名:', getStudentName())
      console.log('学院:', getCollege())
      console.log('专业:', getDepartment())
      console.log('年级:', getGradeYear())
      console.log('状态:', getStatus())
      
      ElMessage.success('学生信息已输出到控制台，请查看浏览器开发者工具')
    }
  }
}
</script>

<style scoped>
.student-home {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.student-info {
  margin: 20px 0;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.action-buttons .el-button {
  flex: 1;
}
</style>
